<template>
  <router-view />
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import websocketService from '@/services/websocketService'
import { checkAuth } from '@/utils/auth'

const router = useRouter()

/**
 * 初始化全局 WebSocket 连接
 * 
 * 说明：
 * - 只有在用户已登录时才初始化（需要 token）
 * - 注册系统通知处理器，接收服务器推送的通知
 * - 注册连接状态监听器，监控连接健康状态
 * 
 * 应用场景：
 * - 系统公告推送
 * - 点赞/评论通知
 * - 活动通知
 * - 数据更新通知
 */
const initGlobalWebSocket = () => {
  // 检查用户是否已登录（需要 token 才能建立连接）
  if (checkAuth()) {
    // 检查用户ID是否有效（避免连接无效路径）
    const userId = localStorage.getItem('user_id')
    if (!userId || /^\d+$/.test(userId)) {
      console.log('[App] 用户ID无效或格式不正确，跳过全局 WebSocket 初始化')
      console.log('[App] 提示：客服系统使用独立的WebSocket连接，不受此影响')
      return
    }
    
    console.log('[App] 用户已登录，初始化全局 WebSocket')
    websocketService.init()  // 初始化全局 WebSocket 服务

    // ============ 注册系统通知处理器 ============
    // 当服务器推送 type='notification' 的消息时，会触发此处理器
    websocketService.onMessage('notification', (data) => {
      console.log('[App] 收到系统通知:', data)
      // 这里可以实现：
      // 1. 显示通知弹窗（如 Element Plus 的 ElNotification）
      // 2. 更新通知角标
      // 3. 播放通知音效
      // 4. 存储到本地通知列表
      if (data.title && data.content) {
        // 临时使用 alert，生产环境应使用更好的 UI 组件
        alert(`通知: ${data.title}\n${data.content}`)
      }
    })

    // ============ 注册连接状态监听器 ============
    // 监听连接状态变化，可用于：
    // 1. 显示连接状态指示器
    // 2. 记录连接日志
    // 3. 触发重连提示
    websocketService.onConnectionChange((isConnected) => {
      console.log(`[App] WebSocket 连接状态: ${isConnected ? '已连接' : '已断开'}`)
    })
  } else {
    console.log('[App] 用户未登录，不初始化全局 WebSocket')
  }
}

// ============ 登录状态监听 ============
// 由于 Vue Router 的路由守卫可能无法捕获所有登录场景，
// 这里使用轮询方式检测登录状态变化，确保登录后及时建立 WebSocket 连接

let lastAuthState = checkAuth()  // 记录上一次的登录状态

/**
 * 检查登录状态变化并自动管理 WebSocket 连接
 * 
 * 说明：
 * - 检测登录状态变化（从未登录→已登录，或从已登录→未登录）
 * - 登录时自动建立 WebSocket 连接
 * - 登出时自动断开 WebSocket 连接
 */
const checkAuthAndInit = () => {
  const currentAuthState = checkAuth()  // 当前登录状态
  
  if (currentAuthState && !lastAuthState) {
    // ============ 状态变化：未登录 → 已登录 ============
    // 用户刚刚登录，初始化全局 WebSocket 连接
    console.log('[App] 检测到用户登录，初始化 WebSocket')
    initGlobalWebSocket()
  } else if (!currentAuthState && lastAuthState) {
    // ============ 状态变化：已登录 → 未登录 ============
    // 用户刚刚登出，断开全局 WebSocket 连接
    console.log('[App] 检测到用户登出，断开 WebSocket')
    websocketService.disconnect()
  }
  
  lastAuthState = currentAuthState  // 更新状态记录
}

// 定期检查登录状态变化
let authCheckInterval = null

onMounted(() => {
  // ============ 应用启动时 ============
  // 如果用户已登录，立即初始化全局 WebSocket
  initGlobalWebSocket()

  // 启动定时器，每2秒检查一次登录状态变化
  // 这样可以捕获：
  // 1. 用户在其他标签页登录
  // 2. 用户通过其他方式登录
  // 3. Token 过期导致的登出
  authCheckInterval = setInterval(checkAuthAndInit, 2000)
})

onBeforeUnmount(() => {
  // ============ 应用卸载前 ============
  // 清理资源：
  // 1. 清除定时器（防止内存泄漏）
  // 2. 断开 WebSocket 连接（释放服务器资源）
  if (authCheckInterval) {
    clearInterval(authCheckInterval)
  }
  
  websocketService.disconnect()
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

